{extend name="layout_modal" /}
{block name="css"}
<link rel="stylesheet" href="{$statics}plugins/select2/select2.css">
<link href="{$statics}plugins/um/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
{/block}
{block name="script"}
<script src="{$statics}plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="{$statics}plugins/um/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{$statics}plugins/um/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{$statics}plugins/um/umeditor.min.js"></script>
<script type="text/javascript" src="{$statics}plugins/um/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    var um = UM.getEditor('myEditor',{initialFrameWidth:null});
</script>
{/block}
{block name="content"}
<section class="content" style="padding-top:0px;">
    <div class="row">
        <div class="box">
            <form role="form" action="{:url('add_quest')}">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">添加问卷问题</h3>
                        <div class="box-tools">
                            <button type="button" class="btn btn-info btn-sm addnew"><i class="fa fa-plus"></i>添加一行</button>
                            <button type="button" id="del" class="btn btn-danger btn-sm" checkItem="1:0" ><i class="fa fa-remove"></i>删 除</button>
                            <input type="hidden" name="id" value="{$info.id}">
                        </div>
                    </div>

                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover">
                            <tbody id="tbody"><tr>
                                <th><input type="checkbox"></th>
                                <th>问题</th>
                                <th style="min-width:70px">类 型</th>
                                <th>选项1</th>
                                <th>选项2</th>
                                <th>选项3</th>
                                <th>选项4</th> 
                            </tr>
                            {volist name="data" id="vo"}
                            <tr>
                                <td><input type="checkbox"></td>
                                <input type="hidden" name="ids" value="{$vo.id}">
                                <td><input type="text" class="form-control"  name="title"  placeholder="问卷问题" value="{$vo.title}"></td>
                                <td>
                                    <select class="form-control" name="type">
                                        <option value="0" {if $vo.type == 0}selected{/if}>单选</option>
                                        <option value="1" {if $vo.type == 1}selected{/if}>复选</option>
                                  </select>
                                </td>
                                <td><input type="text" class="form-control"  name="options1" placeholder="选项1" value="{$vo.options[0]}"></td>
                                <td><input type="text" class="form-control"  name="options2" placeholder="选项2" value="{$vo.options[1]}"></td>
                                <td><input type="text" class="form-control"  name="options3" placeholder="选项3" value="{$vo.options[2]}"></td>
                                <td><input type="text" class="form-control"  name="options4" placeholder="选项4" value="{$vo.options[3]}"></td>
                            </tr>
                            {/volist}
                        </tbody></table>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="{$statics}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('body').on("click",".addnew",function(){
            var htmls = '<tr><td><input type="checkbox"><input type="hidden" name="ids" value="0"></td><td><input type="text" class="form-control"  name="title"  placeholder="问卷问题"></td><td><select class="form-control" name="type"><option value="0">单选</option><option value ="1">复选</option></select></td><td><input type="text" class="form-control"  name="options1" placeholder="选项1"></td><td><input type="text" class="form-control"  name="options2" placeholder="选项2"></td><td><input type="text" class="form-control"  name="options3" placeholder="选项3"></td><td><input type="text" class="form-control"  name="options4" placeholder="选项4"></td></tr>';
            $('#tbody').append(htmls);
        });
        $('body').on("click","#del",function(){
            if(confirm("确定要删除么")){
                var nums = 0;
                $('#tbody').find("input[type='checkbox']").each(function(){
                    if($(this).prop("checked")){
                        $(this).parent().parent().remove();
                        nums++;
                    }
                });
                if(nums == 0){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg("请至少选择1项操作");
                    });
                    return false;
                }        
            }       
        });
    })
    </script>
</section>
<!-- /.content -->
{/block}